<template>
  <div>
    <!-- 子组件内容 -->
    <el-dialog title="新增关联方式" v-if="addMetaModelVisible" :visible="addMetaModelVisible" @close="closeDialog">
      <!-- 对话框内容 -->
      <el-form :model="form" style="margin-top: 2%">
        <el-form-item label="目录" :label-width="formLabelWidth">
          <el-select v-model="form.parentId" clearable placeholder="请选择" @clear="handleClear" ref="selectUpResId">
            <el-option hidden :value="form.parentId" :label="upResName"> </el-option>
            <el-tree :data="treeList" :props="treeProps" :expand-on-click-node="false" :check-on-click-node="true" @node-click="handleNodeClick">
              <div class="comp-tr-node" slot-scope="{ node, data }">
                <!-- 名称： 新增节点增加class（is-new） -->
                <span v-if="data.isDirectory != '1'" :class="[data[NODE_KEY] < NODE_ID_START ? 'is-new' : '', 'comp-tr-node--name']">
                  {{ node.label }}
                </span>
              </div>
            </el-tree>
          </el-select>
        </el-form-item>
        <el-form-item label="模型关系名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="form.description" type="textarea" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="sureAdd">提 交</el-button>
        <el-button type="primary" @click="sureAddone">提交并配置关系</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchMasterdataTableList, fetchMasterdataDirectoryList } from '@/api/masterdata/masterdataTablelist'
import { addoneMetaModel, addMetaModel } from '@/api/metadata/column'
import { getModelTree } from '@/api/metadata/label/metadataLabel'
export default {
  props: {
    dataCate: {
      type: Object,
    },
  },
  data() {
    return {
      treeList: [],
      treeProps: {
        children: 'children',
        label: 'label',
      },
      listQuery: {
        columnName: undefined,
        ancestralId: '9',
        page: 1,
        limit: this.$store.getters.defaultPageSize,
      },
      upResName: '',
      addMetaModelVisible: false,
      form: {
        parentId: '',
        name: '',
        description: '',
        ancestralId: 9,
        id: NaN,
      },
      id: '',
      formLabelWidth: '120px',
    }
  },

  watch: {
    treeList: function (newval, olbval) {
      if (newval) {
        console.log(newval)
        this.nameIndexfUN(newval)
      }
    },
    dataCate: function (newval, oldval) {
      console.log(newval, 'newvalnewvalnewval')
      if (newval.isDirectory == '0') {
        this.upResName = newval.name
        this.form.parentId = newval.id
      }
    },
    deep: true,
  },
  mounted() {
    console.log(this.dataCate, '12===>>>')
  },
  beforeDestroy() {
    this.root()
  },
  methods: {
    on() {
      this.addMetaModelVisible = true
    },
    //节点点击事件
    handleNodeClick(data) {
      // this.readerForm.jobGroup = node.label;
      // this.treeVisible = false; // 隐藏树

      console.log(data)
      // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
      this.upResName = data.name
      this.form.parentId = data.id

      // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
      this.$refs.selectUpResId.blur()
    },
    getList() {
      this.listLoading = true
      addoneMetaModel(this.listQuery).then((response) => {
        if (response.data.code == 0) {
          this.treeList = response.data.data
          this.listLoading = false
        } else {
          this.$message.error(response.data.msg)
        }
        this.listLoading = false
      })
    },

    root() {
      this.form = {
        parentId: '',
        description: '',
        ancestralId: 9,
        id: NaN,
      }
      this.treeList = []
    },
    sureAddone() {
      addMetaModel({ isDirectory: 1, ...this.form }).then((response) => {
        console.log(response.data)
        if (response.data.code === 200) {
          this.$message({
            message: '添加成功',
            type: 'success',
          })
          fetchMasterdataDirectoryList(this.listQuery).then((response) => {
            if (response.data.code == 200) {
              this.treeList = response.data.data
              console.log(this.treeList)
              this.addMetaModelVisible = false
              this.$emit('getlist')
            }
          })
        } else {
          this.$message.error(response.data.msg)
        }
        this.listLoading = false
      })
    },
    nameIndexfUN(item) {
      item.map((v, i) => {
        console.log(v.name, this.form.name)
        if (v.name == this.form.name) {
          console.log(v, '2222222')
          this.id = v.id
          console.log(v)
          this.$router.push({
            path: `/metadata/metaModel/core/ConfigurationRelationships/${this.id}`,
            query: {
              type: 'add',
              modelId: this.id,
              title: '',
            },
          })
        } else {
          if (v.children && v.children.length) {
            this.nameIndexfUN(v.children)
          }
        }
      })
    },
    sureAdd() {
      addMetaModel({ isDirectory: 1, ...this.form }).then((response) => {
        console.log(response.data)
        if (response.data.code === 200) {
          this.$message({
            message: '添加成功',
            type: 'success',
          })
          this.upResName = ''
          this.form.parentId = ''
          this.form.name = ''
          this.form.description = ''
          this.handleClear()
          this.$emit('getlist')
        } else {
          this.$message.error(response.data.msg)
        }
        this.listLoading = false
      })
      this.addMetaModelVisible = false
    },
    handleClear() {
      // 将选择器的值置空
      this.upResName = ''
      this.form.parentId = ''
    },
    openDialog() {
      this.addMetaModelVisible = true
    },
    closeDialog() {
      this.upResName = this.upResName
      this.form.parentId = this.form.parentId
      this.form.name = undefined
      this.form.description = undefined
      this.addMetaModelVisible = false
    },
    cancel() {
      this.form = {
        description: '',
        ancestralId: 9,
        id: NaN,
      }
      this.upResName = this.upResName
      this.form.parentId = this.form.parentId
      this.addMetaModelVisible = false
    },
  },
}
</script>
